<template>
  <div class="gc-container">
    <div style="width:100%;display:inline-block;">
      <div class="gc-left">
        <img v-if = "imageUrl != ''" class="gc-image" :src= "imageUrl" @click="uploadImage"/>
        <div v-else class="gc-image" @click="uploadImage">
          <div style="margin:0px auto;width:100%"> 
            <i style="width:100%" class="el-icon-camera"></i>
            <span style="font-size:13px">添加封面</span>
          </div>
        </div>
        <span style="font-size:13px;margin-top:20px;display: inline-block;">建议最大尺寸不要超过400 * 400</span>
      </div>
      <div class="gc-right">
          <p style="margin-top:20px;margin-bottom:10px;">标题</p>
          <el-input
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 2}"
            placeholder="请输入内容"
            maxlength="42"
            show-word-limit
            v-model="title">
          </el-input>
          <div style="margin-top:20px;margin-bottom:5px;width:100%;display:inline-block">
            <div style="width:200px;height:40px;float:left;line-height:40px;margin-right:20px">
              <span style="float:left;margin-right:8px">专辑类型</span>
              <el-select
                style="float:leftl;width:120px"
                v-model="gtype"
                default-first-option>
                <el-option key="1" label="歌手专辑" value="A"></el-option>
                <el-option key="2" label="歌曲歌单" value="G"></el-option>
              </el-select>
            </div>
            <div style="width:830px;height:40px;float:left;line-height:40px">
              <span style="float:left;margin-right:8px">标签 </span>
              <el-select
                style="float:left;width:calc(830px - 3em)"
                v-model="labels"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="歌单标签">
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </div>
          </div>
          <p style="margin-top:20px;margin-bottom:10px">描述</p>
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6}"
            placeholder="说两句"
            maxlength="340"
            show-word-limit
            v-model="mark">
          </el-input>
      </div>
    </div>
    <div class="gc-item">
      <section style="margin-bottom:30px;float:left">
        <el-button type="danger" icon="el-icon-caret-right" @click="playAll">播放全部</el-button>
        <el-button type="danger" icon="el-icon-share" @click="shareGather">分享</el-button>   
      </section>
      <item-table ref="itable" style="margin-bottom:40px"></item-table>
    </div>
    <div class="gc-item">
      <section style="margin-bottom:30px;float:right">
        <el-button type="danger"  class="btn" @click="deleteGather">删除</el-button>
        <el-button type="primary" class="btn" @click="resetGather">提交</el-button>
      </section>
    </div>
  </div>
</template>

<script>
import { shareGather, uploadFile } from '@/api/event'
import { setGatherService, uploadImageService } from '@/api/music'
import { error, success } from '@/utils/toast'
import { getGather  } from '@/api/music'
import ItemTable from '@/components/ItemTable'
export default {
  name: "g-create",
  components: {
    ItemTable
  },  
  data() {
    return {
      gid:0,
      imageUrl:'',
      title:'',   
      mark:'',
      gtype:'G',
      labels:[],
      uploadImg:'',
      options:['流行','古典','摇滚'],
    }
  },
  created() {
    this.getData()
  },
  methods: {
    shareGather,
    playAll(e) {
      this.$refs.itable.playAllItems(e)
    },
    async resetImage(e) {
      if (e.target.files.length <= 0) return

      const fname = e.target.files[0]
      if (fname.size > 512 * 1024) {
        error("图片大小不能超过512KB")
        return
      }

      //  这里实时显示
      this.imageUrl = window.URL.createObjectURL(fname)

      var formData = new FormData();
      formData.append('filename', fname);
      formData.append('upload_type', this.gtype)
      const resp = await uploadImageService(formData)
      if (resp || 0 == resp.result) {
        this.uploadImg = resp.data
        return
      }
    },
    uploadImage() {
      uploadFile(".png,.jpg,.jpeg,.bmp", this.resetImage)
    },
    async getData() {
      if (this.$route.query.type !== 'gathers') {
        this.gtype = 'A'
      }

      if (this.$route.query.gid <= 0) return
      const resp = await getGather({"gid":this.$route.query.gid})
      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      this.gid   = resp.data.gid
      this.title = resp.data.title   
      this.mark  = resp.data.mark   
      this.gtype = resp.data.gtype
      this.labels = resp.data.label.split(",")
      this.uploadImg = resp.data.g_image
      this.imageUrl = `/mpi/gather/image?gid=${this.gid}&r=${Math.random()}`
    },
    async deleteGather() {
      const resp = await setGatherService({
        op : "delete",
        gid: +this.$route.query.gid})
      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }

      this.$router.push({path:'/config', query:{gid:resp.data.gid}})
    },
    async resetGather() {
      let op = "insert"
      if (+this.$route.query.gid > 0) {
         op = "update"
      }
      const resp = await setGatherService({
        op      : op,
        gid     : +this.$route.query.gid,
        title   : this.title,
        gtype   : this.gtype,
        imgtype : '1',
        g_image : this.uploadImg,
        mark    : this.mark,
        label   : this.labels.join(",")
      })

      if (!resp || 0 !== resp.result) {
        error(resp.message)
        return
      }
      
      if (op === "insert") {
        success("创建成功")
        this.$router.push({path:'/config/g_create', query:{gid:resp.data.gid}})
      } else {
        success("更新成功") 
      }
      
      this.$router.push({path:'/config', query:{gid:resp.data.gid}})
    },
    //setGather
  }
}
</script>

<style lang="scss" scoped>
  .gc-container {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    margin: 0 auto;
    width: 1300px;

    .gc-left {
      width:100%;
      margin-top:80px;
      width:200px; 
      float:left;
      margin-right:50px;

      .gc-image {
        width:100%;
        height:200px;
        background-color:#D9D9D9;
        border-radius: 10px;
        box-shadow: 10px 1px 10px #888888;
        display: flex;
        align-items: center;
        cursor: pointer;
      }
    }

    .gc-right {
      width:100%;
      margin-top:40px;
      width:1050px; 
      float:left;
      text-align: left;
    }
  }

  .gc-item {
    width:100%;
    display:inline-block;
    margin-top:40px;

    .btn {
      width:120px;
      margin-left:50px;
    }
  }

  .gt-table {
    width:100%;
    margin-bottom:40px;
    display:inline-block;
  }
</style>